<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆</title>
	<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
	<link rel="stylesheet" href="layui/css/layui.css">
	<script src="layui/layui.all.js"></script>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
body{
	width:100%;
	height:100%;
	background:url("images/0.jpg")no-repeat;
	background-size:cover;
	overflow:hidden;
}
.frame{
	width:800px;
	height:600px;
	
	margin-left:auto;
	margin-right:auto;
}	
.formtable{
	width:250px;
	height:450px;
	margin-left:auto;
	margin-right:auto;
	
	
}

.input_outer{
padding-top:50px;
}

h1{
width:370px;
margin-left:auto;
margin-right:auto;
padding-top:50px;
font-size:60px;
}
button{
margin-top:50px;
margin-left:40px;
width:50px;
height:30px;
}

</style>
<body >
	<div>
		<div class="frame">
			<h1>在线学习系统</h1>
			<form action="#" class="formtable">
				<div class="input_outer">
					<span class="glyphicon glyphicon-user">用户类型：</span>
					<select name="type" class="text" id="select">
						<option class="text" value="2">----请选择身份----</option>
						<option value="0" >系统管理员</option>
						<option value="1" >销售员</option>
						<option value="2" >销售经理</option>
						<option value="3" >包装员</option>
						<option value="4" >包装经理</option>
						<option value="5" >集装箱员</option>
						<option value="6" >客户</option>
					</select>
				</div>
				<div class="input_outer">
					<span class="glyphicon glyphicon-user">账 号 ：</span>
					<input name="userId" id="userId" class="text" type="text" placeholder="请输入用户ID">
				</div>
				<div class="input_outer">
					<span class="glyphicon glyphicon-lock">密 码 ：</span>
					<input name="password" id="password" class="text"  stlye="position:absolute; z-index:100;"value="" type="password" placeholder="请输入密码">
				</div>
				<button type="button" id="login">登陆</button>
				<button type="button" id="reset">注册</button>
			</form>
		</div>
	</div>
	
</body>

<script>
$(function(){
	layui.use(['table','form',"layer"], function() {
		var table = layui.table;
		var form = layui.form;
		var layer = layui.layer;
	$("#reset").on("click",function(){
		
			layer.open({type : 1,
					skin : 'layui-layer-rim', // 加上边框
					area : [ '520px', '400px' ], // 宽高
					content : '<form class="layui-form layui-form-pane" action="" id="form1">\n'
							+ '  <br>\n'
							+ '  <div class="layui-form-item">\n'
							+ '    <label class="layui-form-label">账号ID</label>\n'
							+ '    <div class="layui-input-block">\n'
							+ '      <input type="text" id="Id" lay-verify="title" autocomplete="off" placeholder="不能为空" class="layui-input">\n'
							+ '    </div>\n'
							+ '  </div>\n'
							+ '  <div class="layui-form-item">\n'
							+ '    <label class="layui-form-label">姓名</label>\n'
							+ '    <div class="layui-input-block">\n'
							+ '      <input type="text" id="Name" lay-verify="title" autocomplete="off" placeholder="不能为空" class="layui-input">\n'
							+ '    </div>\n'
							+ '  </div>\n'
							+ '  <div class="layui-form-item">\n'
							+ '    <label class="layui-form-label">密码</label>\n'
							+ '    <div class="layui-input-block">\n'
							+ '      <input type="text" id="pw" lay-verify="title" autocomplete="off" placeholder="不能为空" class="layui-input">\n'
							+ '    </div>\n'
							+ '  </div>\n'
							+ '  <div class="layui-form-item">\n'
							+ '    <label class="layui-form-label">确认密码</label>\n'
							+ '    <div class="layui-input-block">\n'
							+ '      <input type="text" id="repw" lay-verify="title" autocomplete="off" placeholder="不能为空" class="layui-input">\n'
							+ '    </div>\n'
							+ '  </div>\n'
							+ '<div ><button type="button" lay-submit  class="layui-btn" style="margin-left: 160px;" id="btn12">提交</button>\n'
							+ '<button type="reset" class="layui-btn layui-btn-primary">重置</button></div>\n'
							+ '</form>'
				});
			$("body").on("click","#btn12",function(){
				var userId = $("#Id").val();
				console.log("userId:"+userId);
				var userName=$("#Name").val();
				console.log("userName:"+userName);
				var password=$("#pw").val();
				console.log("password:"+password);
				var repassword=$("#repw").val();
				console.log("repassword:"+repassword);
				if(userId=="" || userName=="" || password=="" || repassword==""){
					layer.msg("请完善信息再注册");
					console.log("111111");
				}else if(password!=repassword){
					 layer.msg("密码不一致");        
				}else{
					$.ajax({
						url:'/insertUser',
						dataType:'json',
						type:'post',
						data:{
							userId:userId,
							userName:userName,
							password:password
						},
						success:function(){
							
							layer.closeAll();
							layer.msg("注册成功，等待审核");
					
						},
						error:function(){
								layer.msg("系统错误");
							
						}
					})
				}
				
			})
		})
	$("#login").on("click",function(){
		var type = $("#select option:checked").val();
		console.log(type);
		var userId = $("#userId").val();
		var password = $("#password").val();
		$.ajax({
			type:"post",
             
              url: "/selectUser",
      	      dataType:"json",
    		  async:false,
              data: {
            	  "userId":userId,
            	  "password":password,
            	  "type":type
                    },
              success:function(data){
            	 if(data.msg == "学员"){

            		 window.location.href="/Student";
            		 
            	 }else if(data.msg == "系统管理员"){
            		 
            		 window.location.href="/Admin";
            		 
            	 }else if(data.msg=="审核"){
            		 
            		 window.location.href="/Login";
            		 alert("待审核账号，请联系管理员审核");
            		 
            	 }else if(data.msg="管理员账号待激活"){
            		 window.location.href="/Login";
            		 alert("管理员账号待激活");
            	 }else{
            		 window.location.href="/Login";
            		 alert("输入账号或密码有误");
            	 }
            	 
            	 
              }
		});
	})	
		
		
	})
	
})







</script>
<!-- <script>
			$(function() {
				$("#login").on(
						"click",
						function() {
							var select = $("#select option:checked").text();
							var userId = $("#userId").val();
							var password = $("#password").val();
							if (select == "----请选择身份----" || userId == ""
									|| password == "" ) {
								layer.tips('请填写完整', 'button', {
									tips : [ 1, '#3595CC' ],
									time : 4000
								});
							}
						})
				$("#login").on("click", function(){
					var select = $("#select option:checked").text();
					var userId = $("#userId").val();
					var password = $("#password").val();
					
					$.ajax({
						type:"post",
		                  type: "Post",
		                  url: "/Checklogin",
		          	      dataType:"json",
		        		  async:false,
		                  data: {
		                	  "userId":userId,
		                	  "password":password,
		                	  "select":select
		                        },
		                  success:function(data){
		                	 if(data.msg == "学生"){
	
		                		 window.location.href="/Student";
		                		 
		                	 }else if(data.msg == "教师"){
		                		 
		                		 window.location.href="/Teacher";
		                		 
		                	 }else if(data.msg == "管理员"){
		                		 
		                		 window.location.href="/admin";
		                		 
		                	 }else{
		                		 
		                		 window.location.href="/Login";
		                		 alert("输入账号或密码有误");
		                		 
		                	 }
		                  }
					});
				})
				
				 
			})
</script>  -->
</html>